<template>
	<div class="login">
		<div class="title">
			<h3>商家云台登录</h3>
			<img src="../../../public/images/BrowserPreview_tmp.gif"/>
		</div>
		<div class="ball">
		</div>
		
		<div class="logIn">
			<input
			  class="input"
			  placeholder="请输入内容"
			  v-model="name"
				type="text"
			/>
			<input 
				class="input"
				placeholder="请输入密码"
				v-model="password" 
				@keydown.enter='btn'
				type="password"
			/>
			<button type="button"  @click="btn">
				Login
			</button>
			<div class="singup">
				<span @click="singup">
				&nbsp;去注册&nbsp;
				</span>
			</div>
		</div>
	</div>
	
</template>

<script lang="ts">
	import {defineComponent,reactive,toRefs,watchEffect} from 'vue';
	import axios from '@assets/request/index';
	import {ElMessage,ElLoading} from 'element-plus'
	import {useStore} from 'vuex'
	import {useRouter} from 'vue-router'
	
	export default defineComponent({
		methods:{
			btn:async function(){
				interface obj{
					data?:string,
					state?:number
				}
				if(this.name=='' || this.password==''){
					ElMessage.error('用户名或密码不能为空！')
					return;
				}
				const loading = ElLoading.service({
				   lock: true,
				   text: '登陆中...',
				   background: 'rgba(0, 0, 0, 0.7)',
				 })
				let result:any =await axios({
					url:'/admin/login',
					params:{
						name:this.name,
						password:this.password,
					}
				})
				loading.close()
				if(result.state == 200){
					this.Store.commit('setToken',result.data);
					this.Store.commit('setUserInfo',{
						name:result.name,
						Id:result._id,
						HeadImg:result.HeadImg
					});
					ElMessage({
						type:'success',
						message:'登陆成功！'
					})
					this.$router.push({
						path:'/home'
					});
				}else{
					ElMessage.error('用户名或者密码错误请重新登陆！')
				}
			},
			singup(){
				this.$router.push({
					path:'/singup'
				});
			}
		},
		setup(props,context){
			const user=reactive({
				name:'admin',
				password:'123456'
			})
			var Store=useStore();
			var route=useRouter()
			let {name,password}=toRefs(user)
			//检查 pagedata 
			if(Store.getters.getPageData)
				route.go(0)
			//规范化数据
			watchEffect(()=>{
				name.value=name.value.replace(' ','')
				password.value = password.value.replace(' ','')
			})
		
			return {name,password,Store}
		}
	})
</script>

<style scoped="scoped">
	.login{
		width: 100%;
		height: 100vh;
		background:url(../../../public/images/bj.jpeg);
		background-size: 100% 100%;
		overflow: hidden;
	}
	.title{
		width: 100%;
		height: 70px;
		margin:10px auto;
		color: #fff;
		font-size: 20px;
		position: relative;
		text-align: center;
	}
	.title img{
		width: 100%;
		height: 100px;
		position: absolute;
		bottom: -10px;
		left: 0;
	}
	.logIn{
		width: 100vw;
		height: 100vw;
		background: url(../../../public/images/e.png);
		background-size: 100% 100%;
		font-size: 20px;
		position: absolute;
		top:50%;
		transform: translateY(-50%);
		right: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.logIn button{
		background: #00ebff;
		border:none;
		outline: none;
		width: 50%;
		line-height: 3rem;
		font-size: 20px;
		color: #fff;
		font-weight: bold;
		margin-top: 30px;
		border-radius: 10px;
		cursor: pointer;
	}
	.logIn  input{
					font-size: 18px;
					width: 85%;
			    border: none;
			    box-sizing: border-box;
					margin-top: 40px;
			    margin-left: 0.5rem;
			    line-height: 3rem;
			    color: #00eaff;
					text-align: center;
			    padding-left: 0.15rem;
			    /* box-shadow: 0 0 1px #00eaff; */
			    outline: none;
			    -webkit-tap-highlight-color: rgba(255,0,0,0);
					background: url(../../../public/images/b.png);
					background-size: 100% 100%;
	}
	.ball{
		width: 30vw;
		height: 30vw;
		background:url(../../../public/images/d.png);
		background-size: 100% 100%;
		animation: rotate 8s infinite linear;
		position: absolute;
		left: 10%;
		top:20vh;
		display: none;
	}

	.singup{
		line-height: 1.5em;
		width: 100%;
		box-sizing: border-box;
		text-align: right;
		max-width: 100vw;
		font-size: 13px;
		padding-right: 40px;
		color:#00ebff;
		font-weight: bold;
		cursor: pointer;
		text-decoration: underline;
		text-underline-offset: 3px;
	}
	@keyframes rotate{
		from{
			transform: rotateZ(0deg);
		}
		to{
			transform: rotateZ(360deg);
		}
	}
	@media (min-width:500px) { 
		.title{
			width: 70%;
			height: 80px;
			font-size: 30px;
		}
		.ball{
			top:30%;
			display: block;
		}
		.logIn{
			width: 400px;
			height: 400px;
			right: 10%;
		}
	}

</style>
